<template>
  <el-form 
    v-if="model"
    ref="formRef" 
    :model="model" 
    label-width="auto" 
    class="search-form"
    :class="{ collapsed: isCollapsed }"
    v-bind="$attrs"
  >
    <div class="form-grid">
      <template v-for="(col, index) in columns" :key="col.prop">
        <el-form-item
          :label="col.label"
          :prop="col.prop"
          v-show="!isCollapsed || index < 4"
        >
          <!-- 多元素组件 -->
          <template v-if="col.options?.length">
            <component
              v-model="model[col.prop!]"
              v-bind="col.componentProps"
              :is="`el-${col.component}`"
            >
              <template v-if="col.optionsComponent">
                <component
                  v-for="option in col.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                  :is="`el-${col.optionsComponent}`"
                />
              </template>
            </component>
          </template>
          <!-- 单元素组件 -->
          <template v-else>
            <component
              v-model="model[col.prop!]"
              v-bind="col.componentProps"
              :is="`el-${col.component}`"
            />
          </template>
        </el-form-item>
      </template>

      <el-form-item label="">
        <el-button type="primary" :icon="Search" @click="handleSubmit">查询</el-button>
        <el-button @click="handleReset" :icon="RefreshRight">重置</el-button>
        <slot name="action" :formRef="formRef" :model="model" />
        <div class="collapse-btn" @click="toggleCollapse"><el-icon class="collapse-icon"><ArrowUpBold /></el-icon></div>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import { Search, RefreshRight, ArrowUpBold } from '@element-plus/icons-vue'

import type { FormInstance } from 'element-plus'
import type { FormProps, FormColumns } from './types'

const props = defineProps<FormProps>()
const emits = defineEmits(['handle-submit'])

const model = ref<any>(null)
const formRef = ref<FormInstance>()
const isCollapsed = ref(true)

const initForm = () => {
  if (props.columns && props.columns.length) {
    const m: any = {}

    props.columns.forEach((item: FormColumns) => {
      m[item.prop!] = item.value
    })

    model.value = cloneDeep(m)
  }
}

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

const handleSubmit = () => {
  emits('handle-submit', model.value)
}

const handleReset = () => {
  formRef.value?.resetFields()
  emits('handle-submit', model.value)
}

watch(() => props.columns, () => {
  initForm()
}, { deep: true })

onMounted(() => {
  initForm()
})

</script>

<style lang="less" scoped>

.search-form {
  transition: all 0.4s ease;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 20px;
}

.collapse-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 6px 10px;
}

.collapse-icon {
  margin-left: 6px;
  transition: transform 0.3s ease;
}

.collapsed .collapse-icon {
  transform: rotate(180deg);
}

</style>